<template>
  <s-page custom-class="Tabbar-Page">
    <view class="container">
      <c-demo-block title="凸起按钮">
        <s-tabs
          v-model="midButton"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '显示', value: true },
            { label: '隐藏', value: false },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="顶部边框">
        <s-tabs
          v-model="border"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '显示', value: true },
            { label: '隐藏', value: false },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="阴影">
        <s-tabs
          v-model="shadow"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '显示', value: true },
            { label: '隐藏', value: false },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="自定义颜色">
        <s-tabs
          v-model="customColor"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '自定义', value: true },
            { label: '默认', value: false },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="自定义home选中显示">
        <s-tabs
          v-model="customHome"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '自定义', value: true },
            { label: '默认', value: false },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="切换拦截">
        <s-tabs
          v-model="beforeChange"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '是', value: true },
            { label: '否', value: false },
          ]"
        />
      </c-demo-block>
    </view>

    <s-tabbar
      :value="value"
      :list="list"
      :border="border"
      :shadow="shadow"
      :background="customColor ? '#333333' : ''"
      active-color="#39b54a"
      :border-color="customColor ? '#333333' : ''"
      :mid-button-icon-style="{
        background: '#39b54a',
        borderRadius: '50%',
        fontSize: '40rpx',
        width: '70rpx',
        height: '70rpx',
        color: 'white',
      }"
      @change="onChange"
    />
  </s-page>
</template>

<script>
export default {
  data: () => ({
    value: 0,
    midButton: true,
    border: true,
    shadow: false,
    customColor: false,
    customHome: false,
    beforeChange: false,
  }),
  computed: {
    list() {
      const homeItem = {
        text: '首页',
        icon: 'wap-home-o',
        activeIcon: 'wap-home',
      };
      if (this.customHome && this.value == 0) {
        Object.assign(homeItem, {
          alignCenter: true,
          hideText: true,
          activeIcon: 'fire',
          iconStyle: {
            background: '#39b54a',
            borderRadius: '50%',
            fontSize: '40rpx',
            width: '70rpx',
            height: '70rpx',
            color: 'white',
          },
        });
      }
      return [
        homeItem,
        {
          text: '商品',
          icon: 'gift-o',
          activeIcon: 'gift',
        },
        {
          text: '发布',
          icon: 'plus',
          midButton: this.midButton,
        },
        {
          text: '购物车',
          icon: 'shopping-cart-o',
          activeIcon: 'shopping-cart',
          badge: {
            value: 9,
          },
        },
        {
          text: '我的',
          icon: 'friends-o',
          activeIcon: 'friends',
          badge: {
            dot: true,
          },
        },
      ];
    },
  },
  methods: {
    onChange(index) {
      if (this.beforeChange) {
        uni.showModal({
          title: '提示',
          content: '确认切换吗？',
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              this.value = index;
            }
          },
        });
      } else {
        this.value = index;
      }
    },
  },
};
</script>

<style lang="scss">
.Tabbar-Page {
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
